const redeemEditBtn = (h, param, vm) => {
    let canEdit = false;
    let time = Date.now() < new Date(param.row.expire_time.replace(/-/g, '/')).getTime();
    if (param.row.is_use != '1' && time) {
        canEdit = true;
    }
    return h('Button', {
        props: {
            type: "primary",
            icon: 'edit',
            disabled: !canEdit
        },
        style: {
            'margin-right': '10px',
        },
        on: {
            click: () => {
                vm.selectRedeem = param.row;
                vm.selectRedeem._index = param.index;
                vm.redeemCodeForm.expire_time = new Date(param.row.expire_time.replace(/-/g,'/'));
                vm.redeemCodeForm.love_beans_num = param.row.love_beans_num;

                vm.showModal = true;
            }
        }
    }, '编辑')
}
const redeemDeleteBtn = (h, param, vm) => {
    return h(
        "Poptip", {
            props: {
                confirm: true,
                title: "确定要删除这个兑换码?",
                transfer: true
            },
            on: {
                "on-ok": () => {
                    vm.deleteRedeem(param.row)
                }
            }
        }, [
            h('Button', {
                class: 'refund-btn',
                props: {
                    type: "error",
                    icon: 'trash-b',
                    disabled: param.row.is_use == '1'
                },
                on: {
                    click: () => {

                    }
                }
            }, '删除')
        ]
    )
}

export default {
    computed: {
        user() {
            return this.$store.state.user.data
        }
    },
    data() {
        return {
            redeemCodeTableColumns: [{
                'title': '序号',
                'align': 'center',
                'type': 'index',
                'width': 70
            }, {
                'title': '兑换码',
                'align': 'center',
                'key': 'exchange_code',
                'width': 120

            }, {
                'title': '可兑爱豆数',
                'align': 'center',
                'key': 'love_beans_num',
                'width': 120

            }, {
                'title': '兑换人',
                'align': 'center',
                'key': 'nickname',

            }, {
                'title': '已使用',
                'align': 'center',
                'key': 'is_use',
                'width': 90

            }, {
                'title': '兑换时间',
                'align': 'center',
                'key': 'exchange_time',
                'width': 100
            }, {
                'title': '到期时间',
                'align': 'center',
                'key': 'expire_time',
                'width': 100
            }, {
                'title': '创建时间',
                'align': 'center',
                'key': 'createtime',
                'width': 100

            }, {
                'title': '操作',
                'align': 'center',
                'key': 'action',
                'action': true,
                'width': 200

            }],
            searchKey: '',
            pageCount: 0,
            pageNum: 1,
            pageLoading: false,
            showModal: false,
            modalLoading: true,
            redeemCodeList: [],
            selectRedeem: '',
            redeemCodeForm: {
                love_beans_num: 1,
                expire_time: '',
                add_count:1
            },
            redeemCodeFormRules: {},
            datePickOption: {
                disabledDate(date) {
                    return date && date.getTime() < new Date(new Date()-24*60*60*1000);
                }
            }
        }
    },
    methods: {
        /**
         * @param {Boolean} type
         * 设置确定按钮loading动画，传True或者False
         */
        changeLoadingStatus(type) {
            if (!type) {
                this.modalLoading = false;
            }
            this.$nextTick(() => {
                this.modalLoading = true;
            });
        },
        doSearch() {
            this.pageNum = 1;
            this.getRedeemCodeList();
        },
        clearSearch() {
            this.searchKey = '';
            this.pageNum = 1;
            this.getRedeemCodeList();
        },
        changePage(num) {
            this.pageNum = num;
            this.getRedeemCodeList();
            document.querySelector('.single-page-con').scrollTo(0, 0)
        },
        getRedeemCodeList() {
            if (this.pageLoading) return
            this.pageLoading = true;
            this.http.post(this.postUrl.getRedeemCodeUrl, {
                token: this.user.tokenList[0],
                pageNum: this.pageNum,
                pageSize: 20,
                key_word: this.searchKey
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                    this.redeemCodeList = JSON.parse(JSON.stringify(data.data.list));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            }).then(() => {
                this.pageLoading = false;
            })
        },
        clickOK() {
            console.log(this.redeemCodeForm);
            this.changeLoadingStatus(true)
            if (!this.redeemCodeForm.expire_time) {
                this.$Notice.warning({
                    title: '请选择到期时间'
                })
                this.changeLoadingStatus(false);
                return
            }else{
                if(this.redeemCodeForm.expire_time.getTime() < new Date().getTime()){
                    this.$Notice.warning({
                        title: '请选择现在之后的时间'
                    })
                    this.changeLoadingStatus(false);
                    return
                }
            }
            let postData = JSON.parse(JSON.stringify(this.redeemCodeForm));
            postData.token = this.user.tokenList[0];
            postData.expire_time = this.redeemCodeForm.expire_time.getTime()
            if (this.selectRedeem) {
                postData.uuid = this.selectRedeem.uuid;
            }
            this.http.post(this.postUrl.addOrEditRedeemCode, postData).then((data) => {
                if (data.code > -1) {
                    this.$Notice.success({
                        title: this.selectRedeem ? '修改成功！' : '新增成功！'
                    })
                    this.showModal = false;
                    this.getRedeemCodeList();
                } else {
                    this.errorHandle(data.msg)
                }
                this.changeLoadingStatus(false)

            }, () => {
                this.errorHandle()
                this.changeLoadingStatus(false)

            })
        },
        deleteRedeem(param) {
            this.http.post(this.postUrl.deleteRedeemCode, {
                token: this.user.tokenList[0],
                uuid: param.uuid,
                is_use: param.is_use
            }).then((data) => {
                if (data.code > -1) {
                    this.$Notice.success({
                        title: '操作成功！',
                    })
                    this.getRedeemCodeList()
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            })
        },

    },
    created() {
        this.redeemCodeTableColumns.forEach(item => {
            if (item.key == 'is_use') {
                item.render = (h, param) => {
                    return h('Icon', {
                        props: {
                            type: param.row.is_use == '1' ? 'checkmark-circled' : 'close-circled',
                            size: 16,
                            color: param.row.is_use == '1' ? "#00a854" : '#f04134'
                        }
                    })
                }
            }
            if (item.action) {
                item.render = (h, param) => {
                    return h('div', [
                        redeemEditBtn(h, param, this),
                        redeemDeleteBtn(h, param, this)
                    ])
                };

            }
        })
        if (this.user) {
            this.getRedeemCodeList()
        }
    },
    watch: {
        user(val, old) {
            if (!old && val) {
                this.getRedeemCodeList()

            }
        },
        showModal(val) {
            if (!val) {
                setTimeout(() => {
                    this.redeemCodeForm = {
                        love_beans_num: 1,
                        expire_time: '',
                    }
                }, 300)
            }
        }

    }
}
